<template>
    <view>
        <view class="container">
            <view class="navTitle">
                <image
                    @click="back"
                    class="icon"
                    src="@/static/mine/chevron_left.png"
                    mode="scaleToFill"
                />
                <text class="text">登录账号</text>
                <view></view>
            </view>
            <view class="header">
                <view class="h1"> 欢迎使用飞行日记 </view>
                <view class="tip"> 飞行日记里，书写自己的故事 </view>
            </view>

            <view class="main">
                <view class="inpLayout">
                    <view class="label">账号</view>
                    <input
                        :value="userNameVal"
                        type="text"
                        class="input"
                        placeholder="请输入至少3位数字、英文字母组合"
                        @input="userNameInput"
                    />
                </view>
                <view class="inpLayout">
                    <view class="label">密码</view>
                    <input
                        :value="pwdVal"
                        :password="isPassword"
                        type="text"
                        class="input"
                        placeholder="请输入至少6位数字、英文字母组合"
                        @input="pwdInput"
                    />
                    <image
                        @click=" isPassword = !isPassword "
                        class="icon"
                        :src=" isPassword ? '/static/mine/noLook.png' : '/static/mine/look.png' "
                        mode="scaleToFill"
                    />
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="button" @click="confirm">登录</view>
            <view class=" button textBtn" @click="register">注册账号</view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex";
import {
    PASSWORD_RULE,
    USER_NAME
} from '@/config/reg'
import { toast } from '@/common';
import storage from '@/utils/storage';
import { userNameLoginApi } from '@/servers/userServer.js';
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            userNameVal:'' , // 输入框 用户名
            pwdVal:"" , // 输入框 密码
            isPassword:true , // 密码加密显示
        };
    },
    computed: {
        ...mapState("userStore" , ["userInfo"])
    },
    methods: {
        ...mapActions("userStore" , ["updateUserInfoFn"]),
        back(){
            uni.navigateBack()
        },
        register(){
            uni.navigateTo({url:'/pages_second/account/register'})
        },
        async confirm(){
            const rule_user_name = USER_NAME.test(this.userNameVal)
            const rule_password = PASSWORD_RULE.test(this.pwdVal)
            if(!rule_user_name || !rule_password){
                toast({title:"请检查账号或密码格式~",icon:"none" , position:"center" })
                return
            }
            let id = this.userInfo.id 
            const option = {
                user_id:id, 
                username: this.userNameVal , 
                password:this.pwdVal
            }
            const res = await userNameLoginApi(option)
            if(res.code !== 0){
                toast({title:res.message,icon:"none" , position:"center" })
                return
            }
            this.updateUserInfoFn(res.data)

            setTimeout(()=>{
                uni.switchTab({ url: '/pages/mine/mine' })
            },300)
            

        },
        userNameInput(e){
            this.userNameVal = e.detail.value
        },
        pwdInput(e){
            this.pwdVal = e.detail.value
        },
    },
    onLoad() {},
};
</script>

<style lang="scss" scoped>
.container {
    padding: 42rpx;

    .navTitle {
        display: flex;
        height: 200rpx;
        justify-content: space-between;
        align-items: center;

        .icon {
            width: 48rpx;
            height: 48rpx;
        }

        .text {
            font-size: 32rpx;
            font-weight: 600;
        }
    }

    .header {
        margin-bottom: 80rpx;

        .h1 {
            font-size: 52rpx;
            font-weight: 500;
            margin-bottom: 10rpx;
        }

        .tip {
            color: #999;
            font-size: 24rpx;
        }
    }

    .main {
        .inpLayout {
            display: flex;
            align-items: center;
            height: 100rpx;
            border-bottom: #ececec solid 2rpx;
            margin-bottom: 30rpx;

            .label {
                margin-right: 20rpx;
                font-weight: 600;
                font-size: 28rpx;
            }
            .input {
                width: 80%;
                font-size: 28rpx;
            }
            .icon {
                width: 48rpx;
                height: 48rpx;
            }
        }
    }
}

.footer {
    position: fixed;
    bottom: 80rpx;
    width: 80vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(10vw);

    .button {
        width: 100%;
        background: rgba(255, 242, 114, 0.7);
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        color: #40351D;
        font-weight: 600;
        margin-bottom: 20rpx;
        border-radius: 24rpx;
        font-size: 28rpx;
    }

    .textBtn {
        background: rgba(245, 244, 242, 1);
    }
}
</style>
